<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>确认订单</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="js/layui/css/layui.css">
        <script src="js/layui/layui.js"></script>
        <link rel="stylesheet" href="css/swiper.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/detail.css">
        <style>
        	.tl-addree{
        		height: 50px;
        		line-height: 50px;
        		color: #909090;
        		font-size: 16px;
        		background-color: #fff;
        		text-align: center;
        		border: 1px dashed #BE343C;
        	}
        	.tl-addree img{
        		padding-right: 10px;
        	}
        	.tl-mar5{
        		background-color: #fff;
        		margin-top: 5px;
        		padding: 10px;
        	}
        	.tl-orderimg{
        		
        	}
        	.tl-orderimg img{
        		width: 100px;
        		height: 100px;
        		border: 1px solid #f8f8f9;
        	}
        	.tl-ordertext{
        		font-size: 14px;
			    max-height: 40px;
			    line-height: 20px;
			    overflow: hidden;
			    color: #323232;
        	}
        	.tl-ordernum{
        		font-size: 12px;
        		color: #909090;
        	}
        	.tl-orderright{
        		text-align: right;
        	}
        	.tl-orderright span{
        		vertical-align: middle;
        	}
        	.tl-mar15{
        		margin-top: 15px;
        	}
        	.tl-make{
        		background-color: #fff;
        		margin:5px 0 0;
        		padding: 20px 12px;
        	}
        	.tl-ordermake{
        		color: #909090;
        		font-size: 14px;
        	}
        	.tl-ordermake span{
        		vertical-align: -4px;
        		font-size: 14px;
        	}
        	.tl-padding5{
        		padding-left: 7px;
        		/*text-align: right;*/
        		vertical-align: middle;
        		margin-bottom: 0;
        		font-size: 14px;
        	}
        	.tl-ver{
        		text-align: right;
        	}
        	.tl-ver span,.tl-ver i{
        		vertical-align: middle;
        	}
        	.eduction{
        		position: fixed;
        		bottom: 0;
        		left: 0;
        		width: 100%;
        		height: 50px;
        		line-height: 50px;
        		background-color: #b4b4b4;
        		font-size: 18px;
        		color: #fff;
        		text-align: center;
        	}
        	.tl-row{
        		padding: 12px 12px;
        		background: url(img/img/bg_addressline.png)repeat-x bottom #FFFFFF;
        	}
        	.tl-row span{
        		font-size: 15px;
        		color: #323232;
        	}
        	.tl-row .tl-name{
        		padding-right: 7px;
        	}
        	.tl-row div{
        		color: #909090;
        		font-size: 14px;
        		margin: 3px 0 15px 0;
        	}
        	.tl-mar2{
        		margin: 2px 0 0;
        	}
        	.tl-hover{
        		background-color: #BE343C;
        		color: #FFFFFF;
        	}
        </style>
	</head>
	<body >
	  <div class="mian">
		  <div class="layui-row tl-top">
			  <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-leftalign">
				  <img src="img/img/icon_back.png"/>
			  </div>
			  <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-align">
				  确认订单
			  </div>
			  <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-rightalign">

			  </div>
		  </div>
		  <!--没地址-->
		  <div class="layui-row tl-addree">
			  <img src="img/img/icon_-.png"/>添加收货地址
		  </div>
		  <!--有地址 layui-hide(隐藏)-->
		  <div class="tl-row layui-hide">
			  <span class="tl-name">你是谁</span>
			  <span class="tl-ipone">152132469475</span>
			  <div class="tl-addre">广东省深圳市福田区上沙上沙大厦1503</div>
		  </div>

		  <div class="layui-row tl-mar5">
			  <div class="layui-row">
				  <div class="layui-col-xs4 layui-col-sm2 layui-col-md2 tl-orderimg">
					  <img src="img/img/bheizhi.png"/>
				  </div>
				  <div class="layui-col-xs8 layui-col-sm10 layui-col-md10">
					  <div class="tl-ordertext">的煎熬卡洛斯的煎熬考四六级的进口量</div>
					  <div class="tl-ordernum">颜色:<span>尊贵白</span></div>
					  <div class="layui-row tl-mar15">
						  <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-integ">
							  <span>4396</span><i>积分</i>
						  </div>
						  <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 tl-orderright">
							  <span>x2</span>
						  </div>
					  </div>
				  </div>
			  </div>
		  </div>

		  <div class="layui-row tl-mar5">
			  <div class="layui-row">
				  <div class="layui-col-xs4 layui-col-sm2 layui-col-md2 tl-orderimg">
					  <img src="img/img/bheizhi.png"/>
				  </div>
				  <div class="layui-col-xs8 layui-col-sm10 layui-col-md10">
					  <div class="tl-ordertext">的煎熬卡洛斯的煎熬考四六级的进口量</div>
					  <div class="tl-ordernum">颜色:<span>尊贵白</span></div>
					  <div class="layui-row tl-mar15">
						  <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-integ">
							  <span>4396</span><i>积分</i>
						  </div>
						  <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 tl-orderright">
							  <span>x2</span>
						  </div>
					  </div>
				  </div>
			  </div>
		  </div>
		  <div class="layui-row tl-make">
			  <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 tl-ordermake">
				  订单备注:
			  </div>
			  <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 tl-padding5">
				  请注意包装
			  </div>
		  </div>
		  <!--有地址 layui-hide(隐藏)-->
		  <div class="layui-row tl-make tl-mar2 layui-hide">
			  <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 tl-ordermake">
				  配送方式:
			  </div>
			  <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 tl-padding5">
				  快递
			  </div>
		  </div>
		  <div class="layui-row tl-make">
			  <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 tl-ordermake">
				  <span>合计:</span>
			  </div>
			  <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-md-offset6 layui-col-sm-offset6 layui-col-xs-offset6 tl-padding5 tl-integ tl-ver">
				  <span>4396</span><i>积分</i>
			  </div>
		  </div>
		  <div class="eduction">兑换</div>
		  <!--有地址增加tl-hover给上面的div-->
	  </div>
	</body>
</html>
